<template>
  <el-dialog
    title="题目预览"
    :visible="dialogVisible"
    width="50%"
    :center="false"
    @close="CancelDialog"
  >
    <!-- 题目类型 -->
    <el-row
      type="flex"
      justify="center"
      :gutter="20"
      style="margin-bottom: 20px"
    >
      <el-col :span="6"
        >【题型】：{{
          detailQuestion.questionType | filterQuestionType
        }}</el-col
      >
      <el-col :span="6"> 【编号】：{{ detailQuestion.id }} </el-col>
      <el-col :span="6">
        【难度】：{{ detailQuestion.difficulty | filterQuestionDiff }}
      </el-col>
      <el-col :span="6"> 【标签】：随机 </el-col>
    </el-row>
    <el-row type="flex" justify="start" :gutter="20">
      <el-col :span="6">【学科】：{{ detailQuestion.subjectName }}</el-col>
      <el-col :span="6"> 【目录】：{{ detailQuestion.directoryName }} </el-col>
      <el-col :span="6"> 【方向】：{{ detailQuestion.direction }} </el-col>
    </el-row>
    <hr />
    <!-- 题干 -->
    <el-row type="flex" justify="start">
      <el-col :span="3">【题干】：</el-col>
      <el-col :span="10">
        <span style="text-align: center; height: 10px; line-height: 10px"
          >({{ checkBox.length | filterOptionsNum }})</span
        >
      </el-col>
    </el-row>
    <!-- 题目 -->
    <el-row type="flex" justify="start" align="start">
      <el-col
        v-html="detailQuestion.question"
        :span="8"
        style="color: #409eff"
      ></el-col>
    </el-row>
    <div v-show="!checkBox.length <= 0">
      <div>
        <span>{{ detailQuestion.questionType | filterQuestionType }}</span>
        选项：（以下选中的为正确答案）
      </div>
      <el-checkbox-group v-model="checkBox" :max="checkBox.length">
        <el-checkbox
          ref="check"
          disabled
          class="dialogCheck"
          v-for="city in detailOptions"
          :key="city.id"
          :label="city.id"
        >
          {{ city.title }}
        </el-checkbox>
      </el-checkbox-group>
    </div>

    <hr />
    <!-- 参考答案 -->
    <el-row type="flex" justify="start">
      <el-col
        ><span style="vertical-align: middle">【参考答案】：</span
        ><span class="questionAnswer" @click="showVideo = !showVideo"
          >{{ "视频答案预览" }}
        </span>
        <div>
          <video
            v-if="showVideo"
            width="320"
            height="240"
            controls
            autoplay
            muted
          >
            <source :src="detailQuestion.videoURL" type="video/mp4" />
          </video>
        </div>
      </el-col>
    </el-row>
    <hr />
    <!-- 答案解析 -->
    <el-row type="flex" justify="start">
      <el-col>
        【答案解析】：<span
          class="parseAnswer"
          v-html="detailQuestion.answer"
        ></span
      ></el-col>
    </el-row>
    <hr />
    <!-- 题目备注 -->
    <el-row type="flex" justify="start">
      <el-col
        >【题目备注】：<span
          class="parseAnswer"
          v-html="detailQuestion.remarks"
        ></span
      ></el-col>
    </el-row>
    <div slot="footer" class="dialog-footer Cancle">
      <el-button class="CancleBtn" type="primary" @click="CancelDialog">
        关 闭
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'QuestionDialog',
  props: {
    // 弹窗显示
    dialogVisible: {
      type: Boolean,
      required: true
    },
    // 单个问题详情数据
    detailQuestion: {
      type: [Object, Array],
      required: true
    },
    // 弹窗问题 选项详情
    detailOptions: {
      type: Array,
      required: true
    },
    // 多选框勾选数据
    checkBox: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      // 显示播放标签
      showVideo: false
    }
  },
  methods: {
    // 关闭弹窗
    CancelDialog () {
      //   console.log('我在这里')
      // 关闭弹窗
      this.$emit('cancle', false)
      this.showVideo = false
    }
  }
}
</script>

<style lang="less" scoped>
// 弹窗
/deep/ .dialogCheck {
  display: block;
  height: 30px;
}
/deep/ .questionAnswer {
  display: inline-block;
  text-align: center;
  color: #fff;
  width: 100px;
  height: 30px;
  line-height: 30px;
  background-color: #f56c6c;
  border-radius: 5px;
  font-size: 12px;
}
// 弹窗答案
/deep/ .parseAnswer {
  display: inline-block;
  text-align: center;
}
// 关闭按钮
/deep/ .Cancle {
  position: relative;
  height: 40px;
  .CancleBtn {
    position: absolute;
    top: 0;
    right: 0;
  }
}
// 选项之间的间距
/deep/ .el-radio-group,
.el-checkbox-group {
  line-height: 30px;
}
// 选项框里面的圆点背景
/deep/.el-checkbox__input.is-disabled .el-checkbox__inner {
  cursor: pointer;
  background-color: #fff;
}
// 选择框里的圆点
/deep/.el-checkbox__inner::after {
  border: 1px solid rgb(220, 220, 220);
  transform: none;
  position: absolute;
  background-color: #fff;
  top: 3px;
  left: 2px;
  width: 5px;
  height: 5px;
}
// label标签中 文本颜色
/deep/.el-checkbox__input.is-disabled + span.el-checkbox__label {
  color: rgb(76, 76, 76);
  cursor: pointer;
}
// 选中的圆点
/deep/ .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after,
/deep/.el-checkbox__input.is-disabled .el-checkbox__inner::after {
  border-radius: 50%;
}
// 不显示禁用标志
/deep/.el-checkbox__input.is-disabled .el-checkbox__inner::after {
  cursor: pointer;
}
// 这里是 选择框的样式
/deep/ .el-checkbox__input.is-disabled .el-checkbox__inner {
  border-radius: 50%;
}
// 选中的背景样式
/deep/ .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
  background-color: #409eff;
  border-color: #409eff;
}
</style>
